<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:common="http://www.contact.common.com/contacts/ui"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:atria="http://www.atria.cz/common/jsf"
        >

<ui:component>
    <style type="text/css">
        .padding0 {
            padding: 0;
        }

        .leftText {
            text-align: left;
        }

        .rightText {
            text-align: right;
        }
    </style>
   
    <rich:panel id="requestRichPanel"
                style="overflow:auto;text-align:left;width:100%; border:none"
                bodyClass="rich-laguna-panel-no-header , padding0">


        <rich:panel style="overflow:auto;text-align:left;width:99%; border:none;"
                    bodyClass="rich-laguna-panel-no-header">
            <a4j:outputPanel layout="block">
                <a4j:outputPanel style="float:left">
                    <h:panelGrid columns="4">
                        <h:outputLabel value="#{resources.selectLabel}:"/>
                        <a4j:commandLink value="#{resources.allLabel}"
                                         action="#{pictureBean.selectAllPictures}"
                                         reRender="pictureForEditPanel,trivialAlbumCommandPanel"/>
                        <h:outputLabel value=", "/>
                        <a4j:commandLink value="#{resources.noneLabel}"
                                         action="#{pictureBean.nonePictures}"
                                         reRender="pictureForEditPanel,trivialAlbumCommandPanel"/>
                    </h:panelGrid>

                </a4j:outputPanel>
                <a4j:outputPanel id="trivialAlbumCommandPanel" style="float:right; vertical-align:bottom;">
                    <h:panelGrid columns="4">
                        <a4j:commandButton disabled="#{not pictureBean.haveSelectedPictures}"
                                           value="#{resources.deleteLabel}"
                                           action="#{pictureBean.prepareToRemoveSelectedPictures}"
                                           reRender="confirmationRemovePicturePanel"
                                           oncomplete="Richfaces.showModalPanel('confirmationRemovePicturePanel');"
                                           limitToList="true"/>
                        <!--<h:outputLabel rendered="#{photosSessionBean.focusedAlbum.canDelete}" value="|"-->
                        <!--style="color:gray; padding: 2px;"/>-->
                        <a4j:commandButton rendered="#{photosSessionBean.focusedAlbum.canDelete}"
                                           value="#{resources.editAlbumLabel}"
                                           action="#{photosBean.perapeToUpdateAlbum}"
                                           reRender="addNewAlbumPanel"
                                           oncomplete="Richfaces.showModalPanel('addNewAlbumPanel');"
                                           limitToList="true"/>
                        <a4j:commandButton rendered="#{photosSessionBean.focusedAlbum.canDelete}"
                                           value="#{resources.deleteAlbumLabel}"
                                           action="#{photosBean.prepareToDeleteAlbum}"
                                           reRender="deleteAlbumPanel"
                                           oncomplete="Richfaces.showModalPanel('deleteAlbumPanel');"
                                           limitToList="true"/>
                    </h:panelGrid>
                </a4j:outputPanel>
            </a4j:outputPanel>

            <rich:fileUpload fileUploadListener="#{pictureBean.listener}"
                             id="upload"
                             maxFilesQuantity="10"
                             immediateUpload="true"
                             acceptedTypes="jpg, gif, png, bmp"
                             listHeight="0"
                             listWidth="100%"
                             allowFlash="false">
                <a4j:support event="onuploadcomplete" reRender="pictureForEditPanel"/>
            </rich:fileUpload>
            <a4j:outputPanel id="pictureForEditPanel" style="width:100%; margin:3px;" layout="block">

                <a4j:outputPanel id="operationTextPanel" layout="block" style="margin:5px">
                    <h:outputLabel rendered="#{pictureBean.countOfSelectedPictures == 0}" style="font-weight: bold"
                                   value="#{resources.allPictureLabel} - ">
                        <h:outputLabel style="color: blue;" value="#{pictureBean.countOfPictures}"/>
                    </h:outputLabel>
                    <h:outputLabel rendered="#{pictureBean.countOfSelectedPictures != 0}" style="font-weight: bold"
                                   value="#{resources.selectedPictureLabel} - ">
                        <h:outputLabel style="color: blue;" value="#{pictureBean.countOfSelectedPictures}"/>
                    </h:outputLabel>
                </a4j:outputPanel>

                <rich:dataGrid id="personalsAlbumRichTable"
                               columns="1" value="#{pictureBean.pictures}"
                               var="item" rowKeyVar="row"
                               style="width:100%"
                               onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                               onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">

                    <a4j:outputPanel style="width:100%" layout="block">
                        <a4j:jsFunction name="change#{item.index}"
                                        reRender="operationTextPanel, trivialAlbumCommandPanel"/>
                        <h:panelGrid columns="2" style="width:100%" columnClasses="left,right">
                            <a4j:outputPanel>
                                <a4j:outputPanel style="float:left; min-width:110px; text-align:center;" layout="block">
                                    <h:panelGrid columns="2" style="width:100%">
                                        <h:selectBooleanCheckbox value="#{item.selected}" style="margin:5px"
                                                                 onchange="change#{item.index}();"/>


                                        <a4j:mediaOutput element="img" mimeType="#{item.picture.mimeType}"
                                                         createContent="#{photosBean.paint}"
                                                         value="photo_#{item.picture.id}"
                                                         style="max-width:100px; max-height:100px; padding:4px;
                                                                                   border:1px solid #CCCCCC; background:white"
                                                         cacheable="false">
                                            <f:param value="#{imageSliderBean.timeStamp}" name="time"/>
                                        </a4j:mediaOutput>

                                    </h:panelGrid>
                                </a4j:outputPanel>
                                <a4j:outputPanel style="float:left;" layout="block">
                                    <h:panelGrid columns="2">
                                        <h:outputLabel value="#{resources.nameLabel}"/>
                                        <h:panelGroup>
                                            <common:inplaceTextarea id="descriptionName"
                                                                    value="#{item.picture.name}"
                                                                    jsSave="updatePictureName()"/>
                                            <a4j:jsFunction action="#{pictureBean.updatePicture}"
                                                            name="updatePictureName"
                                                            ajaxSingle="true">
                                                <f:setPropertyActionListener value="#{item.picture}"
                                                                             target="#{pictureBean.currentPicture}"/>
                                            </a4j:jsFunction>
                                        </h:panelGroup>

                                        <h:outputLabel value="#{resources.addedLabel}"/>
                                        <h:outputLabel value="#{item.picture.rowTimestamp}">
                                            <f:convertDateTime pattern="MMMMM dd , yyyy."/>
                                        </h:outputLabel>

                                        <h:outputLabel value="#{resources.setAsAMainLabel}"/>
                                        <h:selectBooleanCheckbox value="#{item.checkedRow}">
                                            <a4j:support event="onchange"
                                                         action="#{pictureBean.postMainPicture}"
                                                         reRender="pictureForEditPanel, albumPanelView">
                                                <f:param value="#{item.index}" name="pictureIndex"/>
                                            </a4j:support>
                                        </h:selectBooleanCheckbox>

                                    </h:panelGrid>

                                </a4j:outputPanel>

                            </a4j:outputPanel>

                            <a4j:outputPanel style="float:right; height:100%; height:auto" layout="block">
                                <a4j:commandButton style="vertical-align:middle;"
                                                   image="./style/images/removeBig.PNG"
                                                   action="#{pictureBean.prepareToRemovePicture}"
                                                   reRender="confirmationRemovePicturePanel"
                                                   oncomplete="Richfaces.showModalPanel('confirmationRemovePicturePanel');"
                                                   limitToList="true"
                                        >
                                    <rich:toolTip direction="bottom-right" value="#{resources.removeLabel}"/>
                                    <f:param value="#{item.index}" name="pictureIndex"/>
                                </a4j:commandButton>
                            </a4j:outputPanel>
                        </h:panelGrid>

                    </a4j:outputPanel>
                </rich:dataGrid>


            </a4j:outputPanel>
        </rich:panel>

     
    </rich:panel>


</ui:component>


</html>
